<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">

<head>
  <meta charset="utf-8">
</head>

<body style="height: 100%; margin: 0">
  <div>
    <button onclick="updateUI(this.innerHTML)">N350PPS</button>
    <button onclick="updateUI(this.innerHTML)">N300PPS</button>
    <button onclick="updateUI(this.innerHTML)">N300L</button>
    <button onclick="updateUI(this.innerHTML)">N310</button>
  </div>
  <div id="monthly_chart" style="height: 40%;width: 50%;float: left;"></div>
  <div id="monthly_average_chart" style="height: 40%;width: 50%;float: left;"></div>

  <div id="daily_chart" style="height: 40%; width: 50%;float: left;"></div>
  <div id="daily_average_chart" style="height: 40%; width: 50%;float: left;"></div>


  <script type="text/javascript" src="./js/echarts.min.js"></script>
  <script type="text/javascript" src="./js/entire-car.js"></script>
  <script type="text/javascript" src="./js/utils.js"></script>

  <script type="text/javascript">
    function updateUI(type){
      var year = new Date().getFullYear();
      var month = new Date().getMonth() + 1;
  
      var dailyChart = echarts.init(document.querySelector('#daily_chart'));
      var monthlyChart = echarts.init(document.querySelector('#monthly_chart'));
      var dailyAverageChart = echarts.init(document.querySelector('#daily_average_chart'));
      var monthlyAverageChart = echarts.init(document.querySelector('#monthly_average_chart'));
  
      /**
       * Get Test Data for box plot charts
       * @param {array} dateArray [year,month] array
       * @param {number} mean mean value of the distribution
       * @param {number} err standard err value of the distribution
       */
      function getTestData(dateArray, mean, err) {
        let data = [];
        let year = dateArray[0];
        let month = dateArray[1];
        let dates = dateArray.length == 1 ? getAllMonth(year) : getAllDateInMonth(year, month);
        for (date of dates) {
          let singleDateData = [];
          for (let i = 0; i < 480; i++)
            singleDateData.push(generateNormalDistribution(mean, err));
          data.push(singleDateData);
        }
        return { dates, data };
      }
      /**
       * Get average data from data array
       * @param {array} data data array
       */
      function getAverageData(data) {
        let dates = data.dates;
        let averageData = data.data.map(d => d.reduce((a, b) => Number(a) + Number(b), 0) / d.length);
        averageData = averageData.map(item=>{return Number(item.toFixed(2))});
        return { dates, averageData };
      }
  
      /**
       * Update daily chart
       * @param {array} dataArray date array that contains year & month
       * @param {object} chart 
       */
      function updateChart(params) {
        let date = new Date(params.name);
        let year = date.getFullYear();
        let month = date.getMonth() + 1;
        let dateArray = [year, month];
        let dailyDatas = getTestData(dateArray, 0.5, 0.09);
        let testDailyDates = dailyDatas.dates; //for xAxis
        let testDailyData = dailyDatas.data; //for boxplot chart yAxis
        let averageDailyData = getAverageData(dailyDatas).averageData;//for line chart yAxis
  
        dailyChartOption = getBoxPlotOption(`${year}年${month}月${type}每日整车过线前轮外倾跟踪`, "外倾角°", testDailyDates, testDailyData, -0.5, 2);
        dailyAverageChartOption = getLinePlotOption(`${year}年${month}月${type}每日整车过线前轮外倾跟踪`, "外倾角°", testDailyDates, testDailyAverageData,0,1.5,-0.083,1.416);
  
        dailyChart.setOption(dailyChartOption);
        dailyAverageChart.setOption(dailyAverageChartOption);
      }
  
      let dailyDatas = getTestData([year, month], 0.5, 0.09);
      let testDailyData = dailyDatas.data;
      let testDailyDates = dailyDatas.dates;
      let dailyAverageDatas = getAverageData(dailyDatas);
      let testDailyAverageData = dailyAverageDatas.averageData;
  
      let monthlyDatas = getTestData([year], 0.5, 0.49);
      let testMonthlyData = monthlyDatas.data;
      let testMonthlyDates = monthlyDatas.dates;
      let monthlyAverageDatas = getAverageData(monthlyDatas);
      let testMonthlyAverageData = monthlyAverageDatas.averageData;
  
      dailyChartOption = getBoxPlotOption(`${year}年${month}月${type}每日整车过线前轮外倾跟踪`, "外倾角°", testDailyDates, testDailyData, -2, 2);
      monthlyChartOption = getBoxPlotOption(`${year}年${type}每月整车过线前轮外倾跟踪`, '外倾角', testMonthlyDates, testMonthlyData, -4, 4);
  
      dailyAverageChartOption = getLinePlotOption(`${year}年${month}月${type}每日整车过线前轮外倾跟踪`, "外倾角°", testDailyDates, testDailyAverageData,-0.5,2,-0.083,1.416);
      monthlyAverageChartOption = getLinePlotOption(`${year}年${type}每月整车过线前轮外倾跟踪`, '外倾角', testMonthlyDates, testMonthlyAverageData,-0.5,2,-0.083,1.416);
  
      dailyChart.setOption(dailyChartOption);
      monthlyChart.setOption(monthlyChartOption);
  
      dailyAverageChart.setOption(dailyAverageChartOption);
      monthlyAverageChart.setOption(monthlyAverageChartOption);
  
      monthlyChart.on('click', (params) => {
        console.log(params);
        updateChart(params);
      });
  
      monthlyAverageChart.on('clcik', (params) => {
        console.log(params);
        updateChart(params);
      });
      window.addEventListener('resize', dailyChart.resize);
      window.addEventListener('resize', monthlyChart.resize);
      window.addEventListener('resize', dailyAverageChart.resize);
      window.addEventListener('resize', monthlyAverageChart.resize);

    }

    window.onload = updateUI('N350PPS')
  </script>
</body>

</html>